<!--
 * @Description: 
 * @Author: YaoXiaotTian
 * @Date: 2021-05-28 15:48:18
 * @LastEditors: YaoXiaoTian
 * @LastEditTime: 2021-06-10 11:53:02
-->
<template>
  <div class="goods_detail_content_wrap">
    <div class="product">
      <div class="product_img">
        <el-image fit="fill" :src="detail.titlePicStr"></el-image>
      </div>
      <div class="product_details">
        <div class="product_summary">
          <el-tag>乡村特产</el-tag>
          <div>{{ detail.productName }}</div>
        </div>
        <div class="price_sales">
          <span>{{ `¥${price}` }}</span
          ><span>已售{{ salesNum }}</span>
        </div>
        <div class="specification">
          <span>规格：</span>
          <div>
            <div v-for="item in specification" :key="item.id">
              <el-tag
                type="info"
                v-if="item.upperShelves && item.specsName"
                @click="chooseSpecs(item.id, item.productPrice2)"
                :class="[item.id === specsId ? 'choosed' : '']"
                >{{ item.specsName }}</el-tag
              >
            </div>
          </div>
        </div>
        <div class="quantity">
          <span>数量：</span>
          <div>
            <el-button
              class="number_btn"
              @click="deleteNum"
              :disabled="leftBtnDisabled"
              >-</el-button
            >
            <div class="number">{{ buyNum }}</div>
            <el-button class="number_btn" @click="addNum">+</el-button>
          </div>
          <span :style="{ marginLeft: '9px' }">件</span>
        </div>

        <div class="btn">
          <el-button @click="putShopCart()">加入购物车</el-button>
          <el-button @click="buy">立即购买</el-button>
        </div>
      </div>
    </div>
    <div class="shop_car" @click="goPersonCenter">
      <div class="text">购物车</div>
      <el-badge :value="cartNums">
        <el-image :src="require('../../assets/imgs/shopCar.png')" />
      </el-badge>
    </div>
    <div class="product_manual" v-if="productManual && productManual.length">
      <p>产品说明</p>
      <div v-for="(item, index) in productManual" :key="index">
        <div class="text" v-if="item.text">{{ item.text }}</div>
        <el-image v-if="item.img" :src="item.img" />
      </div>
    </div>
    <Comment :content="detail.productReviewsList" :productId="id" :type="1" />
  </div>
</template>

<script>
import Comment from "../../components/comment";
import { get_data } from "../../utils/utils";
export default {
  data() {
    return {
      detail: {},
      specification: [],
      num: 1,
      id: 0, //产品id
      userInfo: {},
      productManual: [], //产品说明
      price: 0,
      specsId: 0, //规格id
      buyNum: 1,
      salesNum: 0,
      cartNums: "",
      address: "",
    };
  },
  components: {
    Comment,
  },
  created() {
    this.id = this.$route.query.id;
    this.salesNum = this.$route.query.saleNum;
    this.getDetail();
    this.getProSpecs();
    this.getAddress();
  },
  mounted() {
    if (get_data("token")) {
      this.userInfo = JSON.parse(get_data("userInfo"));
      this.getCarNum();
    }
  },
  computed: {
    leftBtnDisabled() {
      return this.buyNum > 1 ? false : true;
    },
  },
  methods: {
    getDetail() {
      this.$http
        .fetch(this.$apiPath.getProInfo, {
          method: "get",
          params: {
            proId: this.id,
          },
        })
        .then((res) => {
          this.detail = res.data;
          for (let i = 0; i < 3; i++) {
            if (
              res.data[`productIntro${i}`] ||
              res.data[`productPic${i + 1}Str`]
            ) {
              this.productManual.push({
                text: res.data[`productIntro${i}`],
                img: res.data[`productPic${i + 1}Str`],
              });
            }
          }
          console.log(this.productManual);
        });
    },
    getProSpecs() {
      this.$http
        .fetch(this.$apiPath.getProSpecs, {
          methodType: "get",
          params: {
            productId: this.id,
          },
        })
        .then((res) => {
          this.specification = res.data;
          this.price = res.data[0].productPrice2;
          this.specsId = res.data[0].id;
        });
    },
    getCarNum() {
      this.$http
        .fetch(this.$apiPath.getOrderStatus, {
          method: "get",
        })
        .then((res) => {
          if (res.code === 200) {
            this.cartNums = res.data.cartNums;
          }
        });
    },
    goPersonCenter() {
      this.$router.push({
        path: "/order",
        query: {
          isShoppingCart: true,
        },
      });
    },
    chooseSpecs(id, price) {
      this.specsId = id;
      this.price = price;
    },
    deleteNum() {
      if (this.buyNum > 1) {
        this.buyNum--;
      }
      this.putShopCart(0);
    },
    addNum() {
      this.buyNum++;
      this.putShopCart(1);
    },
    putShopCart(op = 2) {
      if (!get_data("userInfo") && op === 2) {
        this.$router.push({
          path: "/login",
        });
        return;
      }
      let userInfo = JSON.parse(get_data("userInfo"));
      this.$http
        .fetch(this.$apiPath.putShopCart, {
          method: "post",
          data: {
            addOrDel: op == 2 ? 1 : op,
            customerId: userInfo.id,
            productId: this.id,
            specsId: this.specsId,
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.getCarNum();
            this.$message.success("添加成功");
          }
        });
    },
    getAddress() {
      if (!get_data("userInfo")) {
        return;
      }
      let { id } = JSON.parse(get_data("userInfo"));
      this.$http
        .fetch(this.$apiPath.getAddress, {
          method: "get",
          params: {
            customerId: id,
          },
        })
        .then((res) => {
          let addressList = res.data;
          if (addressList && addressList.length) {
            addressList.forEach((item) => {
              if (item.defaultStatus == "true") {
                this.address = item;
              }
            });
          }
        });
    },
    buy() {
      if (get_data("token")) {
        if (!this.address) {
          this.$message("请先添加地址");
          this.$router.push({
            path: "/order/address",
          });
          return;
        }
        this.$http
          .fetch(this.$apiPath.orderAdd, {
            method: "post",
            data: {
              addressId: this.address.id,
              customerId: this.userInfo.id,
              orderInfo: [
                {
                  productId: this.id,
                  saleCount: this.buyNum,
                  specsId: this.specsId,
                },
              ],
            },
          })
          .then((res) => {
            if (res.code == 200) {
              this.$router.push({
                path: `/pay`,
                query: {
                  mergeOrderId: res.data.mergeOrderId,
                  totalPrices: this.totalPrices,
                },
              });
            }
          });
      } else {
        this.$router.push({
          path: "/login",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
